<template>
	<view class="articleDetails" v-if="articleData">
		<nav-bar :home="true">帖子详情</nav-bar>
		<mescroll-uni class="commentScroll" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback" @init="mescrollInit">
			<!-- Start article -->
			<general-card v-if="articleData" :tltle="articleData.author.nickname" :avatar="articleData.author.avatar_url" :note="articleData.author.signature">
				<view class="title">
					<text>{{ articleData.content }}</text>
				</view>
				<view class="right" slot="header_right_extend">
					<view class="views"><text>{{(articleData.comments + articleData.likes ) * 6 + articleData.views}}观看</text></view>
				</view>
				<view class="medias" slot="body_extend" v-if="articleData.files[0]">
					<single-media class="width100" v-if="articleData.files.length < 2" :isImage="articleData.files[0].file_type === 0"
					 :file="articleData.files[0]" maxWidth="450" @playVideo.stop="playVideo" />
					<media-scratchable-latex class="width100" v-else :files="articleData.files" :width="670" space="4" />
				</view>
				<GeneralThumbUp slot="foot_left_extend" class="width100" @likeClick="likeClick" :like_status="articleData.like_status"
				 :likes="articleData.likes"></GeneralThumbUp>
				<view class="right_action" slot="foot_right_extend">
					<button class="btn" open-type="share">
						<text class="iconfont icon-fenxiang"></text>
						<text class="btn_text">分享</text>
					</button>
				</view>
			</general-card>
			<!-- End article -->

			<view class="comment_header">
				<view class="comment_header_left">评论</view>
				<view class="comment_header_rigth">
					共
					<text style="color: #FE5A7C;">{{ comments }}</text>
					条
				</view>
			</view>
			<view class="comments width100" v-for="(item, index) in commentArray" :key="index">
				<view v-if="index % 15 === 0" class="ad_class">
					<!-- #ifdef MP-QQ -->
					<ad unit-id="f37349c7e5c4aed2796b6d0bddc6b129"></ad>
					<!-- #endif -->
				</view>

				<commentItem class="width100" :item="item" :index="index" @commentLike="commentLike"></commentItem>

				<view v-if="index === commentArray.length - 1 && index > 5" class="ad_class">
					<!-- #ifdef MP-QQ -->
					<ad unit-id="e3a83b0ccf69dd98b1242895184573ac" type="card"></ad>
					<!-- #endif -->
				</view>
			</view>
		</mescroll-uni>

		<commentInput class="commentInput" :aid="articleData.pk" :bottom="keyBoardHeight" @inputPostCallback="inputPostCallback"></commentInput>
	</view>
</template>

<script>
	import {
		throttle
	} from '../../utils/DebouchAndThrottl.js';
	import GeneralCard from '../../components/commonComponent/GeneralCard.vue';
	import commentInput from '../../components/commentComponents/commentInput.vue';
	import commentItem from '../../components/commentComponents/commentItem.vue';
	import MescrollUni from '../../components/mescroll-uni/mescroll-uni.vue';
	import GeneralThumbUp from '../../components/commonComponent/GeneralThumbUp.vue';
	import navBar from '../../components/zhouWei-navBar/index.vue';
	import mediaScratchableLatex from '../../components/mediaComponents/mediaScratchableLatex.vue';
	import singleMedia from '../../components/mediaComponents/singleMedia.vue';
	export default {
		components: {
			navBar,
			MescrollUni,
			GeneralCard,
			GeneralThumbUp,
			commentInput,
			commentItem,
			singleMedia,
			mediaScratchableLatex
		},
		data() {
			return {
				articleData: null,
				mescroll: null,
				comments: 0, // 评论数
				commentArray: [],
				upOption: {
					onScroll: true, // 开启滚动条监听
					use: true, // 是否启用上拉加载; 默认true
					isBounce: true, // 开启浏览器touchmove事件
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					textLoading: '正在寻找脑洞—_—',
					textNoMore: '脑洞枯竭了，快去分享一下你的脑洞吧'
				},
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true
				}
			};
		},
		onLoad(option) {
			if (option.aid) {
				// 仅有aid 需要去网络上获取资源
				let url = '/api/article/ivarticle/' + option.aid;
				uni.showLoading({
					title: '加载中'
				});
				this.$http
					.get(url, {})
					.then(res => {
						// 加载成功
						this.articleData = res.data;
						uni.hideLoading();
						// 添加访问记录
						this.$store.commit('articleCache/addBrowsingHistory', res.data);
						console.log(this.$store);
						// 添加浏览数
						this.add_view();
						this.comments = this.articleData.comments;
					})
					.catch(() => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '错误的'
						});
					});
			} else if (option.data) {
				// 直接有所有数据
				this.articleData = JSON.parse(decodeURIComponent(option.data));
				this.$store.commit('articleCache/addBrowsingHistory', this.articleData);
				this.add_view();
				this.comments = this.articleData.comments;
			}
			// if (option.shares) {
			// 	// 来自分享
			// 	this.addShares(this.articleData.pk);
			// }
		},
		onShareAppMessage(res) {
			let title = '笑死我了，赶快来看看';
			let url = '/pages/index/articleDetails?data=' + encodeURIComponent(JSON.stringify(this.articleData));
			return {
				title: title,
				path: url
			};
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				//上滑加载
				let pageNum = mescroll.num;
				let pageSize = mescroll.size;
				let time = mescroll.time || '';
				let data = {
					aid: this.articleData.pk,
					size: pageSize,
					page: pageNum
				};
				if (pageNum > 1) {
					data['time'] = time;
				}
				this.$http
					.get('/api/article/comment', {
						data: data
					})
					.then(response => {
						let time = response.data.result.time;
						let next = response.data.result.next;
						let previous = response.data.result.previous;
						let results = response.data.result.results;

						if (response.statusCode === 200) {
							if (next) {
								next = true;
							} else {
								next = false;
							}
							if (pageNum === 1) {
								this.commentArray = results;
							} else {
								this.commentArray = this.commentArray.concat(results);
							}
							mescroll.endSuccess(results.length, next, time);
						} else {
							uni.showToast({
								title: '发错错误：' + response.statusCode + '，重新试试吧！',
								icon: 'none'
							});
						}
					})
					.catch(error => {
						mescroll.endErr();
						console.log(error);
					});
				console.log('upCallback');
			},
			likeClick: throttle(function(like_type) {
				if (!this.$store.state.login.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.switchTab({
						url: '../user/index'
					});
					return;
				}
				this.$http
					.request({
						url: '/api/article/action/',
						method: 'post',
						data: {
							aid: this.articleData.pk,
							like_type: like_type,
							action: 'add_like'
						}
					})
					.then(res => {
						if (res.statusCode == 200) {
							this.articleData.like_status = res.data.result;
							if (this.articleData.like_status.up) {
								this.articleData.likes++;
							} else {
								this.articleData.likes--;
							}
						} else if (res.statusCode == 400) {
							uni.showToast({
								icon: 'none',
								title: res.data.message
							});
						}
					});
			}, 1000),
			commentLike(like_type, cid, index) {
				if (like_type === 1) {
					this.commentArray[index].likes--;
					this.commentArray[index].like_status.down = true;
					this.commentArray[index].like_status.up = false;
				} else {
					this.commentArray[index].likes++;
					this.commentArray[index].like_status.down = false;
					this.commentArray[index].like_status.up = true;
				}

				this.$http
					.request({
						url: '/api/article/comment/like/',
						method: 'post',
						data: {
							aid: this.articleData.pk,
							cid: cid,
							like_type: like_type
						}
					})
					.then(res => {
						this.commentArray[index].like_status = res.data.data;
					});
			},
			inputPostCallback(item) {
				// 发布评论成功的回调
				this.commentArray.unshift(item);
				this.comments++;
				this.mescroll.scrollTo(250, 100);
			},
			upOrDown(status) {
				if (status.down != status.up) {
					if (status.down) {
						return 1;
					} else {
						return 0;
					}
				} else {
					return 0;
				}
			},
			add_view() {
				this.$http
					.get('/api/article/action/', {
						data: {
							aid: this.articleData.pk,
							action: 'add_view'
						}
					})
					.then(() => {
						this.articleData.views++;
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	};
</script>

<style lang="scss">
	page,
	.articleDetails {
		width: 100%;
		max-height: 100%;
		flex-shrink: 0;
		flex-wrap: wrap;
		background-color: #eff0f7;
	}

	// Article CSS
	general-card {
		width: 100%;
		flex-wrap: wrap;

		.title {
			width: 100%;
			flex-wrap: wrap;
			margin-bottom: 15rpx;
		}

		.views {
			height: 100%;
			align-items: center;
			font-size: 30rpx;
		}

		.medias {
			width: 100%;
		}

		.good_comments {
			width: 100%;
		}

		.left_action {
			height: 55rpx;
			border-radius: 50rpx;
			background-color: #139dfe;

			.after_action {
				height: 100%;
				align-items: center;
				padding: 0 20rpx;

				.icon-up,
				.icon-down {
					font-size: 38rpx;
					font-weight: 600;
					color: white;
				}

				.up_text {
					font-size: 30rpx;
					color: white;
				}
			}

			.before_action {
				height: 100%;
				align-items: center;

				.up {
					height: 100%;
					align-items: center;
					margin-left: 10rpx;

					.icon-up {
						font-size: 38rpx;
						font-weight: 600;
						color: white;
					}

					.up_text {
						font-size: 30rpx;
						color: white;
					}
				}

				.hrs {
					height: 55%;
					border-left: 1rpx #fff solid;
					margin: 0 10rpx;
				}

				.down {
					padding-right: 10rpx;
					align-items: center;
					justify-content: center;

					.icon-down {
						font-size: 38rpx;
						font-weight: 600;
						color: white;
					}
				}
			}
		}

		.right_action {
			align-items: center;
			margin-right: 25rpx;

			button::after {
				border: none;
			}

			button {
				align-items: center;
				justify-content: center;

				border-radius: 50rpx;
				background-color: #139dfe;
				color: white;
				padding: 0 15rpx !important;
				margin: 0 !important;
				line-height: 55rpx;
			}

			.icon-fenxiang {
				font-size: 30rpx;
			}

			.btn_text {
				font-size: 30rpx;
				margin: 6rpx;
			}
		}
	}

	.comment_header {
		padding: 0 20rpx;
		margin: 10rpx 0 2rpx 0;
		background-color: white;
		color: #6b6d78;
		align-items: center;
		width: calc(100% - 40rpx);
		height: 100rpx;
		justify-content: space-between;
	}

	.comments {
		flex-wrap: wrap;

		.ad_class {
			width: 100%;
			flex-wrap: wrap;
			// margin: rpx 0;
		}
	}

	.commentScroll {
		width: 100%;
		height: calc(100%);
		flex-shrink: 0;
		flex-wrap: wrap;
		background-color: #eff0f7;
	}

	/*
mescroll-uni 适应Flex START
*/
	.mescroll-uni-content .mescroll-downwarp {
		text-align: center;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.downwarp-content {
		justify-content: center;
	}

	.mescroll-upwarp {
		text-align: center;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-bottom: 90rpx !important;
		padding-top: 0rpx !important;
	}

	.mescroll-uni-content {
		flex-wrap: wrap;
	}

	.mescroll-empty {
		flex-wrap: wrap;
		justify-content: center;
	}

	.mescroll-uni-fixed {
		// margin-top: 126rpx;
		top: 138rpx !important;
	}

	.empty-tip {
		width: 100%;
		flex-shrink: 0;
		justify-content: center;
	}

	/*
mescroll-uni 适应Flex  END
*/
</style>
/style>
